<template>
<div class="datasource-detail-wrapper detail content">
    <!-- <Spin size="large" fix v-if="loading"></Spin> 加载动画 -->
    <div class="content-header m-b-10"> <!-- 页头部 -->
        <div>
            <ul class="hearder-state">
                <li class="title"><a @click="toDatasourceIndex">数据源</a><span class="m-l-5">></span></li>
                <li class="">{{ datasource.datasourceName }}</li>
            </ul>
        </div>
    </div>
    <div class="page-content">
        <div class="clearfix detail-header"> <!-- 详情头部 -->
            <div class="operation-text"> <!-- 文本 -->
                <div class="bg-icon" :class="iconClass"><span>{{datasource.datasourceName | abbreviate}}</span></div> <!-- 图标 -->
                <h3>{{datasource.datasourceName}}</h3> <!-- 标题 -->
                <p> <!-- 副标题 -->
                    <span>创建人：{{datasource.creator}}</span>
                    <span>创建时间：{{datasource.createTime | date}}</span>
                </p>
            </div>
            <div class="operation-area"> <!-- 操作按钮区域 -->
                <!-- <a title="新增流程" @click="onAddFlowClick"><i class="zlstbd-icon-process"/></a> -->
                <!-- <a title="编辑" @click="onEditClick"><i class="zlstbd-icon-edit" /></a> -->
                <!-- <Poptip trigger="hover" placement="bottom-end" ref="poptip">
                    <a title="更多"><i class="zlstbd-icon-more"/></a>
                    <div slot="content" class="poptip-content">
                        <ul>
                            <li>
                                <p @click="disable" v-if="datasource.state != 0">禁用</p>
                                <p @click="enable" v-if="datasource.state == 0">启用</p>
                            </li>
                            <li v-if="datasource.flowList.length == 0">
                                <p @click="deleteProject">删除</p>
                            </li>
                        </ul>
                    </div>
                </Poptip> -->
            </div>
        </div>
        <Tabs :animated="false" value="detail">
            <TabPane label="数据源详情" name="detail" class="tab-content fix-scrollbar">
                <div class="basic-info">
                    <p class="color-gray p-l-15 m-b-10">基本信息</p>
                    <div class="back-white p-l-20 p-t-15 p-b-15">
                        <Row>
                            <Col :span="10">
                                <span class="m-r-10">数据源名称</span>
                                <span class="detail-info">{{datasource.datasourceName}}</span>
                            </Col>
                            <Col :span="10">
                                <span class="m-r-10">状态</span>
                                <span class="detail-info">{{datasource.status | status}}</span>
                            </Col>
                        </Row>
                        <Row class="m-t-15">
                            <span class="m-r-10">描述</span>
                            <span class="detail-info">{{datasource.itemDesc | text}}</span>
                        </Row>
                    </div>
                </div>
                <div class="content-header m-b-5 m-t-10">
                    <div class="pull-left" style="width: 100%">
                        <ul class="hearder-state">
                            <li class="title" style="width: 100%">
                                <Row class="color-gray p-l-15 " style="width: 100%">
                                    <span>样例数据</span>
                                    <span class="pull-right">
                                        <tooltip content="编辑列信息" transfer placement="bottom" theme="light">
                                            <a @click="editColumns"><i class="zlstbd-icon-rename"></i></a>
                                        </tooltip>
                                    </span>
                                </Row>
                                <!-- <a :class="selectedTable == 'graph' ? 'selected-item':''" @click="selectedTable = 'graph'">相关图形元件</a> -->
                                <!-- <span class="border-line" style="height: 22px;top: 5px;"> </span> -->
                            </li>
                            <!-- <li class="title">
                                <a :class="selectedTable == 'data' ? 'selected-item':''" @click="selectedTable = 'data'">数据详情</a>
                            </li> -->
                        </ul>
                    </div>
                </div>
                <div v-if="selectedTable == 'data'">
                    <Table :columns="dataTableColumns" :data="dataList" stripe :loading="loading"></Table>
                    <Page :total="page.total" :page-size="page.pageSize" :current="page.pageNum"
                    @on-change="onPageNumChange" size="small" show-elevator v-if="datasource.executeType != 'sql'"></Page>
                </div>
                <!-- <div class="content-main" v-if="selectedTable == 'graph'">
                    <Table :columns="graphTableColumns" :data="graphList" stripe></Table>
                </div> -->
            </TabPane>
        </Tabs>
    </div>
    <edit-columns ref="editColumnsCompt" @refresh="queryDsColumnList"></edit-columns>
</div>
</template>

<script>
import getData      from 'getData'
import util         from 'util'

import EditColumns from '../edit-columns/edit-columns.vue'

export default {
    components: {
        EditColumns
    },

    computed: {
        dataTableColumns(){
            var res = [];
            for (let index = 0; index < this.dsColumnList.length; index++) {
                const element = this.dsColumnList[index];
                var column = {
                    title: element.columnName,
                    key: element.originName
                }
                res.push(column);
            }
            return res;
        }
    },
    data () {
        return {

            loading: true,
            datasource: {

            },
            page: {
                total: 0,
                pageSize: 8,
                pageNum: 1
            },
            iconClass: 'back-normal',

            graphTableColumns:[

            ],
            dsColumnList: [],
            dataList: [],
            graphList: [],
            selectedTable: 'data',
        }
    },

    watch: {
        datasource: {
            deep: true,
            handler(val) {
                switch (this.datasource.status) {
                    case 0:
                        this.iconClass = 'back-disable';
                        break;
                    case 1:
                        this.iconClass =  'back-normal';
                        break;
                }
            }
        }
    },

    methods: {
        queryDsColumnList() {
            this.loading = true;
            getData.get('queryAvailableDsColumns', {}, this.datasource.datasourceId).then(res => {
                this.loading = false;
                if (res.status == 200 && res.data.code == '000') {
                    this.dsColumnList = res.data.data;
                    this.queryDsData();
                } else {
                    this.$Message.error("查询数据源列信息失败，请检查网络或联系管理员！");
                    console.error(res);
                }
            })
        },
        queryDsData() {
            this.loading = true;
            var reqData = this.page;
            reqData.datasourceId = this.datasource.datasourceId;
            reqData.columns = this.dsColumnList;
            getData.post('queryDsData', reqData).then(res => {
                this.loading = false;
                if (res.status == 200 && res.data.code == '000') {
                    this.dataList = res.data.data;
                    console.log(this.dataList)
                    this.page.total = res.data.total;
                } else {
                    this.dataList = [];
                    this.$Message.error("查询数据源数据失败，请检查网络或联系管理员！");
                    console.error(res);
                }
            })
        },
        editColumns() {
            this.$refs.editColumnsCompt.show(this.datasource.datasourceId);
        },
        toDatasourceIndex() {
            this.$router.push({
                path: '/datasource'
            });
        },
        onPageNumChange(num) {
            this.page.pageNum = num;
            this.queryDsData();
        },
    },

    mounted() {
        this.datasource = this.$route.params;
        this.queryDsColumnList();
    },

    beforeRouteLeave (to, from, next) {
        this.$destroy();
        next();
    }
}
</script>
